<script setup>
/* 
<script setup>
  + 无法给组件设置名字 
  + 只要在脚本块中声明的变量/函数，可以直接在视图中使用「顶层绑定会被暴露给模板」
  + 可以基于defineProps注册属性「语法和之前的props写法一致；无需从vue中导入这个方法，直接用也可以(内部自己会导入)！」
  ---
  基于defineProps注册的属性，会挂载到this对象上「供视图中使用」，同时也会反馈给props变量「供JS中使用」；
  但直接声明的变量，并没有挂载到this对象上，但视图编译的时候，内部是可以拿到这些值的！
  ---
  局部组件只要到导入进来，直接可以在视图中使用，无需再基于components注册了!
*/
const props = defineProps({
  x: {
    type: Number,
    default: 0,
  },
  title: String,
});

let n = 12,
  m = 13;
</script>

<template>
  测试组件
  <span>{{ n + m }}</span>
  <br />
  <span>{{ x }} - {{ title }}</span>
</template>